<template>
  <div>
    <van-row>
      <van-col span="24" class="title">
        <span style="color: white">浩物安全管理系统</span>
      </van-col>
    </van-row>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-row class="topMargin">
      <van-col span="24">
        <van-tabs v-model="active" color="#576b95" line-width="80px" swipeable @click="changeTab">
          <van-tab title="待办事宜">
            <!-- 逾期未完成 循环遍历第一页数据 -->
            <van-cell-group>
              <van-cell title="逾期未完成" class="bg_grey" />

              <van-cell
                class="cell"
                value="待处理"
                is-link
                label="截止: 2019-12-31 10:30"
                @click="toWorkInfo(item, 1)"
                v-for="item in todoList_before"
                :key="item.id"
              >
                <!-- 使用 title 插槽来自定义标题 -->
                <template slot="title">
                  <van-tag type="primary" v-if="item.type === 1">常</van-tag>
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 1"
                    >日</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 2"
                    >周</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 3"
                    >月</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 4"
                    >季</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 5"
                    >年</van-tag
                  >
                  <van-tag color="#7232dd" v-if="item.type === 3">会</van-tag>
                  <van-tag color="#FF6600" v-if="item.type === 4">考</van-tag>
                  <van-tag color="#999900" v-if="item.type === 5">培</van-tag>
                  <span class="custom-title">{{ item.title }}</span>
                </template>
                <template #label>
                  <div>截止: {{ item.date.format() }} <span style="color:#DC143C;margin-left:10px">(已逾期)</span></div>
                </template>
              </van-cell>
            </van-cell-group>

            <!-- 今日待办 循环遍历第一页数据 -->
            <van-cell-group>
              <van-cell title="今日待办" class="bg_grey" />
              <van-cell
                class="cell"
                value="待处理"
                is-link
                label="截止: 2019-12-31 10:30"
                @click="toWorkInfo(item, 1)"
                v-for="item in todoList_today"
                :key="item.id"
              >
                <!-- 使用 title 插槽来自定义标题 -->
                <template slot="title">
                  <van-tag type="primary" v-if="item.type === 1">常</van-tag>
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 1"
                    >日</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 2"
                    >周</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 3"
                    >月</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 4"
                    >季</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 5"
                    >年</van-tag
                  >
                  <van-tag color="#7232dd" v-if="item.type === 3">会</van-tag>
                  <van-tag color="#FF6600" v-if="item.type === 4">考</van-tag>
                  <van-tag color="#999900" v-if="item.type === 5">培</van-tag>
                  <span class="custom-title">{{ item.title }}</span>
                </template>
                <template #label>
                  <div>截止: {{ item.date.format() }}</div>
                </template>
              </van-cell>
            </van-cell-group>

            <!-- 近期工作安排 循环遍历第一页数据 -->
            <van-cell-group>
              <van-cell title="近期工作安排" class="bg_grey" />
              <van-cell
                class="cell"
                value="待处理"
                is-link
                label="截止: 2019-12-31 10:30"
                @click="toWorkInfo(item, 1)"
                v-for="item in todoList_after"
                :key="item.id"
              >
                <!-- 使用 title 插槽来自定义标题 -->
                <template slot="title">
                  <van-tag type="primary" v-if="item.type === 1">常</van-tag>
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 1"
                    >日</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 2"
                    >周</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 3"
                    >月</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 4"
                    >季</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 5"
                    >年</van-tag
                  >
                  <van-tag color="#7232dd" v-if="item.type === 3">会</van-tag>
                  <van-tag color="#FF6600" v-if="item.type === 4">考</van-tag>
                  <van-tag color="#999900" v-if="item.type === 5">培</van-tag>
                  <span class="custom-title">{{ item.title }}</span>
                </template>
                <template #label>
                  <div>截止: {{ item.date.format() }}</div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-tab>

          <van-tab title="行政审批"></van-tab>

          <van-tab title="工作日志">
            <van-cell-group>
              <van-cell
                class="cell"
                value="待处理"
                is-link
                label="截止: 2019-12-31 10:30"
                @click="toWorkInfo(item, 2)"
                v-for="item in logList"
                :key="item.id"
              >
                <!-- 使用 title 插槽来自定义标题 -->
                <template slot="title">
                  <van-tag type="primary" v-if="item.type === 1">常</van-tag>
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 1"
                    >日</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 2"
                    >周</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 3"
                    >月</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 4"
                    >季</van-tag
                  >
                  <van-tag
                    color="#0099CC"
                    v-if="item.type === 2 && item.sub_type === 5"
                    >年</van-tag
                  >
                  <van-tag color="#7232dd" v-if="item.type === 3">会</van-tag>
                  <van-tag color="#FF6600" v-if="item.type === 4">考</van-tag>
                  <van-tag color="#999900" v-if="item.type === 5">培</van-tag>
                  <span class="custom-title">{{ item.title }}</span>
                </template>
                <template #label>
                  <div>截止: {{ item.date.format() }}</div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <van-cell
          style="height: 40px; background-color: white"
          class="bg_grey"
        ></van-cell>
      </van-col>
    </van-row>
    </van-pull-refresh>
  </div>
</template>

<script>
// import { Toast } from 'vant';
import { Api } from "../../api/api_config";
import Work from "../../model/work";
import { Toast } from 'vant'

export default {
  data() {
    return {
      active: 0,
      user_id: "",
      page: 1,
      pageSize: 10,
      logList: [],
      todoList_before: [],
      todoList_today: [],
      todoList_after: [],
      isLoading: false
    };
  },
  mounted() {
    // this.reset();
    this.initData();
  },
  methods: {
    initData() {
      
      console.log(this.$store.state);
      this.user_id = this.$store.state.configuration.currentUser.id;
      //获取待办
      this.isLoading = false;
      this.getWork();
    },
    toWorkInfo(item, status) {
      this.$store.state.work = item
      this.$store.state.work_status = status
      this.$router.push("/work/workInfo");
    },
    getWork() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      Promise.all([
        this.getWorksPromise(Api.routine.routine, 1, -1, -1),
        this.getWorksPromise(Api.period.period, 1, -1, -1),
        this.getWorksPromise(Api.meeting.meeting, 1, -1, -1),
        this.getWorksPromise(Api.exam.exam, 1, -1, -1),
        this.getWorksPromise(Api.training.training, 1, -1, -1),
      ]).then((responses) => {
        // console.log(responses);
        // 将待办数据 按时间分类放在一个list里
        this.transferWork(responses, false);
        Toast.clear()
      }).catch((e) => {
        console.log(e)
        Toast.clear()
      });
    },
    getLog() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      Promise.all([
        this.getWorksPromise(Api.routine.routine, 2, this.page, this.pageSize),
        this.getWorksPromise(Api.period.period, 2, this.page, this.pageSize),
        this.getWorksPromise(Api.meeting.meeting, 2, this.page, this.pageSize),
        this.getWorksPromise(Api.exam.exam, 2, this.page, this.pageSize),
        this.getWorksPromise(Api.training.training, 2, this.page, this.pageSize),
      ]).then((responses) => {
        // console.log(responses);
        this.transferWork(responses, true);
        Toast.clear()
      }).catch((e) => {
        console.log(e)
        Toast.clear()
      });
    },
    //请求对象 类型 状态 1：下发，2：完成
    getWorksPromise(requestObj, status, page, pageSize) {
      let url = requestObj.url + "?userId=" + this.user_id;
      url = url + "&status=" + status;
      if (page !== -1 && pageSize !== -1) {
        url += "&page=" + page + "&pagesize=" + pageSize;
      }
      let that = this;
      return new Promise(function (resolve, reject) {
        that
          .$axios({
            method: requestObj.method,
            url: url,
          })
          .then(function (res) {
            resolve(res);
          })
          .catch(function (e) {
            reject(e);
          });
      });
    },
    transferWork(responses, isLog) {
      // 分别处理5种类型，因其字段都不一样
      // routine
      responses[0].data.items.forEach((element) => {
        let work = new Work();
        work.id = element.id;
        work.title = element.jobName;
        work.date = this.$moment(element.jobDate);
        work.type = 1;
        work.sub_type = -1;
        work.source = element;
        if (isLog) {
          this.logList.push(work)
        } else {
          this.switchList(work)
        }
      });
      // period
      responses[1].data.items.forEach((element) => {
        let work = new Work();
        work.id = element.id;
        work.title = element.jobName;
        work.date = this.$moment(element.jobDate);
        work.type = 2;
        work.sub_type = element.jobPeriod;
        work.source = element;
        if (isLog) {
          this.logList.push(work)
        } else {
          this.switchList(work)
        }
      });
      // meeting
      responses[2].data.items.forEach((element) => {
        let work = new Work();
        work.id = element.id;
        work.title = element.meetingName;
        work.date = this.$moment(element.meetingDate);
        work.type = 3;
        work.sub_type = -1;
        work.source = element;
        if (isLog) {
          this.logList.push(work)
        } else {
          this.switchList(work)
        }
      });
      // exam (暂无数据)
      responses[3].data.items.forEach((element) => {
        let work = new Work();
        work.id = element.id;
        work.title = element.jobName;
        work.date = this.$moment(element.jobDate);
        work.type = 4;
        work.sub_type = -1;
        work.source = element;
        if (isLog) {
          this.logList.push(work)
        } else {
          this.switchList(work)
        }
      });
      // training
      responses[4].data.items.forEach((element) => {
        let work = new Work();
        work.id = element.id;
        work.title = element.trainingName;
        work.date = this.$moment(element.trainingDate);
        work.type = 5;
        work.sub_type = -1;
        work.source = element;
        if (isLog) {
          this.logList.push(work)
        } else {
          this.switchList(work)
        }
      });
    },
    switchList(work) {
      // 获取今天日期
      let now = this.$moment();

      if (work.date.isBefore(now)) {
        this.todoList_before.push(work);
      } else if (work.date.isSame(now)) {
        this.todoList_today.push(work);
      } else {
        this.todoList_after.push(work);
      }
    },
    changeTab() {
      // 如果选择日志，获取日志数据
      if (this.active === 2) {
        this.logList = []
        this.getLog()
      }
    },
    reset() {
      this.page = 1;
      this.pageSize = 10;
      this.logList = [];
      this.todoList_before = [];
      this.todoList_today = [];
      this.todoList_after = [];
    },
    onRefresh() {
      this.reset();
      this.isLoading = false;
      if (this.active === 0) {
        this.getWork()
      }
      if (this.active === 2) {
        this.getLog()
      }
    }
  },
};
</script>

<style scoped>
.cell .van-cell__title {
  min-width: 70%;
}
</style>
